	<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="All Rights Reserved, Copyright (C) 2013, Wuyeguo, Ltd." />
<title>EasyUI Web Admin Power by Wuyeguo</title>
<link rel="stylesheet" type="text/css" href="../easyui/1.5.3/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../css/wu.css" />
<link rel="stylesheet" type="text/css" href="../css/icon.css" />
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>

</head>
<body>
	
	<div id="user-toolbar">
        <div class="wu-toolbar-button">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openUserAdd()" plain="true">添加</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="openUserEdit()" plain="true">修改</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="removeUser()" plain="true">删除</a>
        
        </div>
        <div class="wu-toolbar-search">
            <label>起始时间：</label><input class="easyui-datebox" style="width:100px">
            <label>结束时间：</label><input class="easyui-datebox" style="width:100px">
            <label>用户组：</label> 
            <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                <option value="0">选择用户组</option>
                <option value="1">黄钻</option>
                <option value="2">红钻</option>
                <option value="3">蓝钻</option>
            </select>
            <label>关键词：</label><input class="wu-text" style="width:100px">
            <a href="#" class="easyui-linkbutton" iconCls="icon-search">开始检索</a>
        </div>
    </div>

	<table id="user-datagrid"></table>
	
	<div id="user-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
        <form id="user-form" class="easyui-form" method="post" data-options="novalidate:true">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="mail" style="width:100%" data-options="label:'Email:',required:true,validType:'email'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="password" style="width:100%" data-options="label:'Subject:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="desc" style="width:100%;height:60px" data-options="label:'Message:',multiline:true">
            </div>
            <div style="margin-bottom:20px">
                <select class="easyui-combobox" name="Language" label="Language" style="width:100%"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>
            </div>
        </form>
   
	</div>
	
	
	<div id="users-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
        <form id="users-form" class="easyui-form" method="post" data-options="novalidate:true">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="mail" style="width:100%" data-options="label:'Email:',required:true,validType:'email'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="password" style="width:100%" data-options="label:'Subject:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="desc" style="width:100%;height:60px" data-options="label:'Message:',multiline:true">
            </div>
            <div style="margin-bottom:20px">
                <select class="easyui-combobox" name="Language" label="Language" style="width:100%"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>
            </div>
        </form>
   
	</div>
	
<script type="text/javascript">
	$('#user-datagrid').datagrid({
        url:'http://localhost:3000/users/list',
        fit:true,
        pageSize:2,    
        pageList:[2,4,6,8,10],
        pagination:true, 
        toolbar:'#user-toolbar',
        columns:[[
        	{field:'checkbox',checkbox:true},
            {field:'name',title:'Name',width:200},
            {field:'mail',title:'Email',width:200},
            {field:'password',title:'password',width:200},
            {field:'desc',title:'desc',width:200},
            {field:'Language',title:'Language',width:200},
        ]],
//      onClickRow:function(index,field,value){
//      	console.log($('#user-datagrid').datagrid('getSelected'))
//      }
    });
    
	function openUserAdd(){
		$('#user-form').form('clear');
		$('#user-dialog').dialog({
			closed: false,
			modal:true,
            title: "添加信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: userAddAction
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#user-dialog').dialog('close');                    
                }
            }]
        });
	        
    }
	
	
	
        function userAddAction(){
	       	$('#user-form').form('submit',{
	                onSubmit:function(){

	                    if($(this).form('enableValidation').form('validate')){
	                    	console.log($('#user-form').serializeJSON())
	                    	$.ajax({
	                    		type:"post",
	                    		url:"http://localhost:3000/users/data",
	                    		data:$('#user-form').serializeJSON()
	                    	}).then(function(res){
//	                    		console.log(res)
	                    	})
	                    	$.messager.alert('信息提示','提交成功！','info');
							$('#user-dialog').dialog('close');
							$('#user-datagrid').datagrid('reload');
	                    }else{
	                    	alert('no')
	                    }
	                    
	                }
	               
	         });
	               
    	}
        
        
		function removeUser(){
			var node = $('#user-datagrid').datagrid('getSelected')
			
			var id = node._id;
			
			$.ajax({
				type:"delete",
				url:"http://localhost:3000/users/data/"+id,
				async:true
			}).then(function(res){
				$('#user-datagrid').datagrid('reload');
			})
		}
     
		
		function openUserEdit(){
			$('#users-form').form('clear');
			$('#users-dialog').dialog({
					closed: false,
					modal:true,
		            title: "修改信息",
		            buttons: [{
		                text: '确定',
		                iconCls: 'icon-ok',
		                handler: userEditAction
		            }, {
		                text: '取消',
		                iconCls: 'icon-cancel',
		                handler: function () {
		                    $('#users-dialog').dialog('close');                    
		                }
		            }]
		    });
		}
		
		function userEditAction(){
			var node = $('#user-datagrid').datagrid('getSelected')
			var id = node._id
			console.log(id)
			$('#users-form').form('submit',{
	                onSubmit:function(){
	                	console.log($('#users-form').serializeJSON());

	                    if($(this).form('enableValidation').form('validate')){
	                    	$.ajax({
	                    		type:"post",
	                    		url:"http://localhost:3000/users/data/"+id,
	                    		data:$('#users-form').serializeJSON()
	                    	}).then(function(res){
	                    		console.log(res)
	                    	})
	                    	$.messager.alert('信息提示','修改成功！','info');
							$('#users-dialog').dialog('close');
							$('#user-datagrid').datagrid('reload');
	                    }else{
	                    	alert('no')
	                    }
	                    
	                }
	               
	         });
		}
</script>
</body>
</html>
